<script setup>
  import { ref } from 'vue'
  import { payInfoSubAPi } from '@/server/payInfo'
  // 在线支付弹层
  const paymentPopup = ref()
  // 打开弹层
  function open() {
    paymentPopup.value.open()
  }
  // 关闭弹层
  function close() {
    paymentPopup.value.close()
  }
  // 开放关闭和显示弹层的方法
  defineExpose({ open, close })

  // 接收传递的金额
  const prop = defineProps([
    'payment',
    'orderId',
    'payInfoList',
    'payCallbackVal',
  ])

  // 点击关闭时触发
  const emit = defineEmits(['closePayPopfn', 'payInfSelect'])

  // 支付方式索引
  const popactiveIndex = ref(1)

  // 点击弹出层的item
  function onPopItemfn(index) {
    popactiveIndex.value = index
    // 向外传递支付方式
    emit('payInfSelect', index)
  }

  // 回调地址

  // 点击立即支付
  async function onpayInfoSubmitfn() {
    if (popactiveIndex.value === 0) return uni.utils.toast('暂不支持微信支付！')
    const { data } = await payInfoSubAPi({
      paymentMethod: popactiveIndex.value,
      orderId: prop.orderId,
      payCallback: prop.payCallbackVal,
    })
    console.log(data.data.payUrl)

    // #ifdef H5
    window.location.href = data.data.payUrl
    // #endif
  }
</script>
<template>
  <uni-popup :is-mask-click="false" ref="paymentPopup" type="bottom">
    <view class="payment-container">
      <view class="payment-header">
        <text class="title">选择支付方式</text>
        <uni-icons
          class="uni-icons-close"
          size="18"
          color="#333"
          type="closeempty"
          @click="$emit('closePayPopfn')"
        />
      </view>
      <view class="order-amount">¥{{ prop.payment }}元</view>
      <uni-list :border="false">
        <uni-list-item
          clickable
          :title="item.title"
          :thumb="item.thumb"
          v-for="(item, index) in prop.payInfoList"
          :key="index"
          @click="onPopItemfn(index)"
        >
          <template #footer>
            <uni-icons
              v-if="index === popactiveIndex"
              size="26"
              color="#16C2A3"
              type="checkbox-filled"
            />
            <uni-icons v-else size="26" color="#d1d1d1" type="circle" />
          </template>
        </uni-list-item>

        <!--    <uni-list-item
          title="微信支付"
          thumb="/static/images/wechatpay-icon.png"
        >
          <template #footer>
            <uni-icons
              v-if="false"
              size="26"
              color="#16C2A3"
              type="checkbox-filled"
            />
            <uni-icons v-else size="26" color="#d1d1d1" type="circle" />
          </template>
        </uni-list-item> -->
      </uni-list>
      <button @click="onpayInfoSubmitfn" class="uni-button">立即支付</button>
    </view>
  </uni-popup>
</template>

<script>
  export default {
    options: {
      styleIsolation: 'shared',
    },
  }
</script>

<style lang="scss">
  .payment-container {
    min-height: 400rpx;
    border-radius: 30rpx 30rpx 0 0;
    background-color: #fff;
    padding: 10rpx 30rpx 40rpx;

    .payment-header {
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      margin-bottom: 20rpx;
      font-size: 32rpx;
      color: #333;
      position: relative;
    }

    .uni-icons-close {
      position: absolute;
      top: 2rpx;
      right: 0;
    }

    .order-amount {
      padding: 10rpx 0 10rpx;
      text-align: center;
      font-size: 40rpx;
      color: #333;
    }

    :deep(.uni-list-item__container) {
      padding: 40rpx 0 !important;
    }

    :deep(.uni-list-item--hover) {
      background-color: #fff !important;
    }

    :deep(.uni-list-item__icon) {
      margin-right: 0;
    }

    .uni-button {
      margin-top: 40rpx;
    }
  }
</style>
